import React, { Component } from "react";
import {
  Spin,
  Button,
  Input,
  Tooltip,
  Badge,
  Table,
  Divider,
  Popconfirm
} from "antd";
import { connect } from "dva";
import styles from "./PushPlan.less";

const { Search } = Input;

@connect(({ pushPlan }) => ({ pushPlan }))
class PushPlan extends Component {
  state = {};

  columns = [
    {
      title: "序号",
      dataIndex: "id",
      key: "id",
      width: "70px",
      render: (text, record, index) => {
        const { filter } = this.props.pushPlan;
        const currentPage = Number(filter.pageIndex);
        const PageSize = Number(filter.pageSize);
        const order = Number(index) + 1 + (currentPage - 1) * PageSize;
        return order;
      }
    },
    {
      title: "计划名称",
      dataIndex: "planName",
      key: "planName",
      render: text =>
        text && text.length > 15 ? (
          <Tooltip placement="top" title={text} arrowPointAtCenter>
            <span>{`${text.substring(0, 15)}……`}</span>
          </Tooltip>
        ) : (
          text
        )
    },
    {
      title: "场景名称",
      dataIndex: "sceneName",
      key: "sceneName",
      width: "16.5%",
      render: text =>
        text && text.length > 15 ? (
          <Tooltip placement="top" title={text} arrowPointAtCenter>
            <span>{`${text.substring(0, 15)}……`}</span>
          </Tooltip>
        ) : (
          text
        )
    },
    {
      title: "推送应用",
      dataIndex: "appName",
      key: "appName",
      width: "12%"
    },
    {
      title: "计划有效期",
      dataIndex: "planTime",
      key: "planTime",
      sorter: true,
      width: "12.5%",
      render: text => text || "不限"
    },
    {
      title: "创建人",
      dataIndex: "creator",
      key: "creator",
      width: "8.5%"
    },
    {
      title: "状态",
      dataIndex: "status",
      key: "status",
      width: "9.5%",
      render: text => (
        <Badge
          status={text === "1" ? "success" : "error"}
          text={text === "1" ? "已启用" : "已停用"}
        />
      ),
      filters: [
        {
          text: "已启用",
          value: "1"
        },
        {
          text: "已停用",
          value: "0"
        }
      ],
      filterMultiple: false
    },
    {
      title: "操作",
      dataIndex: "operation",
      key: "operation",
      width: "15.7%",
      render: (txt, record) => (
        <React.Fragment>
          <a onClick={() => this.updateStatus(record)}>
            {record.status === "1" ? "停用" : "启用"}
          </a>
          <Divider type="vertical" />
          <a onClick={() => this.edit(record)}>编辑</a>
          <Divider type="vertical" />
          <Popconfirm
            placement="top"
            title={"确认要删除？"}
            onConfirm={() => this.delete(record)}
            okText="确定"
            cancelText="取消"
          >
            <a role="button">删除</a>
          </Popconfirm>
        </React.Fragment>
      )
    }
  ];

  componentDidMount() {
    this.props.dispatch({
      type: "pushPlan/getPlanTable",
      payload: { pageIndex: 1, pageSize: 10 }
    });
  }

  componentWillUnmount() {
    this.props.dispatch({ type: "pushPlan/clearFilter" });
  }

  search = value => {
    this.props.dispatch({
      type: "pushPlan/getPlanTable",
      payload: { planName: value, pageIndex: 1, pageSize: 10 }
    });
  };

  // 添加
  add = () => {
    this.props.history.push("/pushPlan/pushPlanEdit");
  };

  // 删除
  delete = record => {
    this.props.dispatch({
      type: "pushPlan/deletePlan",
      payload: { id: record.id }
    });
  };

  // 编辑
  edit = record => {
    this.props.dispatch({
      type: "pushPlan/getPlanDetail",
      payload: { id: record.id }
    });
  };

  // 启用或停用
  updateStatus = record => {
    this.props.dispatch({
      type: "pushPlan/triggerStatus",
      payload: { id: record.id, isStatus: record.status === "1" ? "0" : "1" }
    });
  };

  // 表格修改
  handleTableChange = (pagination, filter, sorter) => {
    const { current: pageIndex, pageSize } = pagination;
    const { status = [] } = filter;
    let { order = "" } = sorter;
    if (order === "descend") order = "desc";
    if (order === "ascend") order = "asc";
    this.props.dispatch({
      type: "pushPlan/getPlanTable",
      payload: { pageIndex, pageSize, status: status[0], order }
    });
  };

  render() {
    const { pushPlan } = this.props;
    const {
      pushPlanList,
      filter,
      totalPage,
      totalCount,
      tableLoading
    } = pushPlan;
    return (
      <Spin spinning={tableLoading} delay={400}>
        <div className={styles.root}>
          <div className={styles.topBar}>
            <span className={styles.title}>推送计划</span>
            <div className={styles.searchBar}>
              <Button type="primary" onClick={this.add}>
                新增计划
              </Button>
              <Search
                placeholder="搜索"
                className={styles.search}
                onSearch={value => this.search(value)}
              />
            </div>
          </div>
          <Table
            columns={this.columns}
            dataSource={pushPlanList}
            rowKey="id"
            onChange={this.handleTableChange}
            pagination={{
              total: totalCount,
              pageSize: filter.pageSize,
              current: filter.pageIndex,
              showSizeChanger: true,
              showQuickJumper: true,
              showTotal: total =>
                `共 ${total} 条记录 第 ${filter.pageIndex}/ ${totalPage}页`
            }}
          />
        </div>
      </Spin>
    );
  }
}

export default PushPlan;
